<template>
  <!--  <div id="executeButton" @click="handleFun()">执行曲线</div>-->
  <!--  <div id="executeButton" @click="handleZx()">绘制路径</div>-->
  <!--  <div id="executeButton" @click="handleTp()">填充图片</div>-->
  <!--  <div id="executeButton" @click="handleDbx()">绘制多边形</div>-->

  <div id="executeButton" @click="handleBd()">显示路径标点区域</div>


  <canvas id="myCanvas" width="800" height="800"></canvas>
</template>

<script setup>
import imagePath from '@/assets/zb.png'

// 画直线，路径动画
const handlezhixian = (start, stop) => {
  // 获取canvas元素
  const canvas = document.querySelector('#myCanvas')
  // 获取canvas渲染上下文
  const ctx = canvas.getContext('2d')

  // 定义起点和终点的坐标
  const startX = start[0]
  const startY = start[1]
  const endX = stop[0]
  const endY = stop[1]

  // 初始化帧动画绘制中线段两个端点的坐标
  let prevX, prevY, nextX, nextY
  prevX = startX
  prevY = startY

  // 第一帧执行的时间
  let startTime;
  // 期望动画持续的时间
  const duration = 1000
  let count = 0

  const step = (currentTime) => {
    !startTime && (startTime = currentTime)
    const timeElapsed = currentTime - startTime
    const progress = Math.min(timeElapsed / duration, 1)

    // 绘制方法
    const draw = () => {
      ctx.beginPath()
      ctx.moveTo(prevX, prevY)

      // 移动笔触后,计算该次线段绘制的终点,并将prevX/Y更新为此值,给下一次绘制的时候使用
      prevX = nextX = startX + (endX - startX) * progress
      prevY = nextY = startY + (endY - startY) * progress

      // 设置线条样式
      ctx.lineWidth = 10
      ctx.strokeStyle = 'rgb(59 191 221)'
      ctx.lineTo(nextX, nextY)
      ctx.stroke()
    }
    draw()

    if (progress < 1) {
      count++
      requestAnimationFrame(step)
    } else {
      console.log('动画执行完毕')
      console.log(`${duration}ms内回调执行次数:${count}次`)
    }
  }

  // 向浏览器发送动画执行请求,当浏览器要进行重绘时,会调用我们传入的step方法
  requestAnimationFrame(step)
}


// 填充图片到指定位置，渐变动画
const handleTp = ({imgX, imgY, imgWidth, imgHeight}) => {
  // 获取canvas元素
  const canvas = document.querySelector('#myCanvas')
  // 获取canvas渲染上下文
  const ctx = canvas.getContext('2d')

  // 创建一个Image对象并加载图片
  const img = new Image();
  img.src = imagePath

  // 当图片加载完成后执行以下操作
  img.onload = function () {
    // 绘制图片到canvas，调整了参数来控制位置和大小
    ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight);

    ctx.fillStyle = "red";
    ctx.textAlign = "center";
    ctx.fillText("Your Text Here", imgX, imgY);
  };
}

// 绘制多边形，添加背景颜色，透明度
const handleDbx = (vertices) => {
  // 获取canvas元素
  const canvas = document.querySelector('#myCanvas')
  // 获取canvas渲染上下文
  const ctx = canvas.getContext('2d')

  ctx.fillStyle = 'rgba(234,228,104,0.5)'
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 2;
  let opacity = 0;

  function animate() {
    requestAnimationFrame(animate);
    if (opacity < 0.5) {
      opacity += 0.01;
      drawPolygon();//重新绘制多边形
    }
  }

  function drawPolygon() {
    ctx.beginPath();
    ctx.moveTo(vertices[0].x, vertices[0].y);
    for (let i = 1; i < vertices.length; i++) {
      ctx.lineTo(vertices[i].x, vertices[i].y);
    }
    ctx.closePath();
    ctx.fillStyle = 'rgba(227, 215, 74,' + opacity + ')';
    ctx.fill();
    ctx.strokeStyle = 'rgba(235, 46, 63,' + opacity + '';
    ctx.stroke();
  }


  drawPolygon();
  animate();
}


const handleBd = () => {
  // 绘制路径
  handlezhixian([20, 20], [140, 140])
  setTimeout(() => handlezhixian([140, 140], [200, 340]), 1000)
  setTimeout(() => handlezhixian([200, 340], [460, 480]), 2000)

  // 显示标点（图片）
  // 存储图片绘制的位置和尺寸
  var images = [
    {
      imgX: 50,
      imgY: 50,
      imgWidth: 40,
      imgHeight: 40
    },
    {
      imgX: 300,
      imgY: 300,
      imgWidth: 40,
      imgHeight: 40
    },
    {
      imgX: 200,
      imgY: 300,
      imgWidth: 40,
      imgHeight: 40
    }
  ];
  handleTp(images[0])
  handleTp(images[1])
  handleTp(images[2])

  // 顶点
  let ddArr = [
    {x: 400, y: 300},
    {x: 500, y: 300},
    {x: 500, y: 100},
    {x: 400, y: 100},
  ]
  handleDbx(ddArr)


  // 获取canvas元素
  const canvas = document.querySelector('#myCanvas')

  // 鼠标悬浮事件处理函数
  function handleMouseover(event) {
    var mouseX = event.offsetX;
    var mouseY = event.offsetY;

    for (var i = 0; i < images.length; i++) {
      var image = images[i];
      if (mouseX > image.imgX && mouseX < image.imgX + image.imgWidth &&
          mouseY > image.imgY && mouseY < image.imgY + image.imgHeight) {

        console.log("鼠标悬浮在图片上！");
        // 这里可以添加更多的悬浮效果，例如改变图片样式或者显示工具提示等
        break;
      }
    }
  }

// 鼠标离开事件处理函数
  function handleMouseout(event) {
    console.log('鼠标离开事件处理函数')
  }

  function throttle(func, delay) {
    let timer = null;
    return function() {
      if (!timer) {
        func.apply(this, arguments);
        timer = setTimeout(() => {
          timer = null;
        }, delay);
      }
    };
  }

  const throttledMouseover = throttle(handleMouseover, 1000);
  const throttledMouseout = throttle(handleMouseout, 1000);


// 绑定鼠标事件
  canvas.addEventListener('mousemove', throttledMouseover);
  canvas.addEventListener('mouseout', throttledMouseout);
}
</script>

<style scoped lang="scss">
canvas {
  /*border: 3px solid rgba(37, 44, 65,0.25);*/
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(37, 44, 65, 0.25);
}

#executeButton {
  min-width: 100px;
  font-size: 24px;
  cursor: pointer;
  background: linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%);
  border: 0;
  border-radius: 3px;
  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3);
  color: white;
  margin: 24px;
  text-align: center;
  padding: 4px 0;
  user-select: none;
}

#executeButton:active {
  border-color: #fff;
  box-shadow: inset 0 3px 5px 2px rgba(255, 105, 135, .3);
}
</style>
